<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:p="http://primefaces.org/ui">  
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">            
            <div class="block">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left">
                        Quản Lý Lớp Học                   
                    </div>
                </div>
                <div class="block-content collapse in">

                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <fieldset>
                                    <legend>Tìm kiếm</legend>
                                </fieldset>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <div class="row">
                                    <div class="span6"><div class="control-group">
                                            <label class="control-label" for="txtCourseID"><h:outputText value="Mã Lớp Học:"/> </label>
                                            <div class="controls">
                                                <h:inputText styleClass="span3" id="txtCourseID" value="#{courseManageBean.criterialCourseID}"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span6"><div class="control-group">
                                            <label class="control-label" for="txtCourseName"><h:outputText value="Tên Khóa Học:"/> </label>
                                            <div class="controls">
                                                <h:inputText styleClass="span9" id="txtCourseName" value="#{courseManageBean.criterialCourseName}"/>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>

                                <div class="row">
                                    <div class="span6">
                                        <div class="control-group">
                                            <label class="control-label" for="select01"><h:outputText value="Loại:"/></label>
                                            <div class="controls">
                                                <t:selectOneMenu value="#{courseManageBean.criterialCourseType}" styleClass="chzn-select">
                                                    <f:selectItem itemValue="0" itemLabel="Tất Cả"/>
                                                    <f:selectItem itemValue="1" itemLabel="Ngoại Khóa"/>
                                                    <f:selectItem itemValue="2" itemLabel="Chính Khóa"/>
                                                </t:selectOneMenu>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="control-group">
                                            <label class="control-label" for="select02"><h:outputText value="Cấp Độ:"/></label>
                                            <div class="controls">
                                                <t:selectOneMenu id="select02" value="#{courseManageBean.criterialCourseType}" styleClass="chzn-select">
                                                    <f:selectItem itemValue="0" itemLabel="Tất Cả"/>
                                                    <f:selectItem itemValue="1" itemLabel="Cấp Độ 1A"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 1B"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 2A"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 2B"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 3A"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 3B"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 4A"/>
                                                    <f:selectItem itemValue="2" itemLabel="Cấp Độ 4B"/>
                                                </t:selectOneMenu>

                                            </div>
                                        </div>
                                    </div>
                                   
                                </div>

                                <div class="row">
                                     <div class="span6">
                                         <div class="control-group">
                                            <label class="control-label" for="txtDateOpen"><h:outputText value="Ngày Mở:"/> </label>
                                            <div class="controls">
                                                <t:inputText id="txtDateOpen" value="#{courseManageBean.criterialStartedDate}" >

                                                </t:inputText>


                                            </div>
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="control-group">
                                            <label class="control-label" for="select03"><h:outputText value="Trạng Thái:"/></label>
                                            <div class="controls">
                                                <t:selectOneMenu value="#{courseManageBean.criterialStatus}" styleClass="chzn-select">
                                                    <f:selectItem itemValue="" itemLabel="Tất Cả"/>
                                                    <f:selectItem itemValue="P" itemLabel="Mở"/>
                                                    <f:selectItem itemValue="O" itemLabel="Đang học"/>
                                                    <f:selectItem itemValue="C" itemLabel="Đóng"/>
                                                </t:selectOneMenu>

                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>



                            </div>

                            <p>
                                <t:commandLink styleClass="btn btn-primary" value="Tìm" action="#{courseManageBean.search}" />
                                <t:commandLink styleClass="btn" value="Reset" action="#{courseManageBean.reset}" />
                            </p>

                        </div>
                    </div>



                </div>
            </div>

            <t:div styleClass="block">
                <t:div styleClass="navbar navbar-inner block-header">
                    <t:div styleClass="muted pull-left">Danh Sách Khóa Học</t:div>
                </t:div>
                <t:div styleClass="block-content collapse in">
                    <t:div styleClass="span12">
                        <t:dataTable id="tblCourse" value="#{courseManageBean.pageData}" var="cursor" styleClass="table table-hover"
                                     preserveSort="true" rows="10" sortColumn="#{courseManageBean.sort}" sortAscending="#{courseManageBean.sortAscending}"
                                     >
                            <t:column>
                                <f:facet name="header">
                                </f:facet>
                                <t:selectOneRow groupName="selectRadioGroup" />
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.id" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="ID"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.id}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Tên Khóa Học"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseName}"/> 
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseLevelName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Trình Độ"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseLevelName}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseTypeName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Loại Khóa Học"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseTypeName}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.timeFrame" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Thời gian"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.timeFrame}">
                                </h:outputText>
                            </t:column>

                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.status" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Trạng Thái"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.status}">
                                </h:outputText>
                            </t:column>

                            <f:facet name="footer">
                                <div class="row">
                                    <div class="span6" style="padding-left: 30px">
                                        <t:div styleClass="pagination pagination-left">
                                            <ul>
                                                <li>
                                                    <t:commandLink  value="Xem" action="#{courseManageBean.viewCourse}"/>
                                                </li>
                                                <li>
                                                    <t:commandLink  value="Thêm" action="#{courseManageBean.preAddCourse}"/>
                                                </li>
                                                <li>
                                                    <t:commandLink  value="Sửa" action="#{courseManageBean.preUpdateCourse}"/>
                                                </li>
                                                 <li>
                                                    <t:commandLink  value="In" action="#{courseManageBean.viewCourse}"/>
                                                </li>
                                            </ul>
                                        </t:div>
                                    </div>
                                    <div class="span6">
                                        <t:div styleClass="pagination pagination-right">
                                            <ul>
                                                <li>
                                                    <t:commandLink  value="Previous"
                                                                    disabled="#{!courseManageBean.hasPreviousPage}"
                                                                    action="#{courseManageBean.previousPage}"/>
                                                </li>

                                                <li>
                                                    <t:commandLink  value="Next"
                                                                    disabled="#{!courseManageBean.hasNextPage}"
                                                                    action="#{courseManageBean.nextPage}" />
                                                </li>
                                                <li class="active"> <a href="#"><t:outputText value="#{courseManageBean.rowCount} row(s)"/></a>
                                                </li>
                                            </ul>
                                        </t:div>
                                    </div>
                                </div>
                            </f:facet>
                        </t:dataTable>

                    </t:div>
                </t:div>

            </t:div>

            <t:inputHidden id="txtSelectedID" value="#{courseManageBean.selectedID}"/>
            <script type="text/javascript" language="JavaScript">
                $("#ppsForm\\:tblCourse input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        $("#ppsForm\\:txtSelectedID").val($(this).parent().parent().find("td").eq(1).html());
                    });
                });

                $("#collapseOne").collapse({hide: true});


                $('#ppsForm\\:txtDateOpen').datepicker({
                    format: 'dd/mm/yyyy'
                });



            </script>
        </ui:define>
    </ui:composition>        

</html>  